<template>
  <div :class="$options._componentTag + 'Component'" ref="MiddleDialog">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :show-close="!dialogLoading"
      v-dialog-drag
      top="0"
      :close-on-click-modal="false"
      :before-close="handleBeforeClose"
      @closed="handleClosed"
    >
      <div
        :class="['el-dialog-body-contant', {'lock-scroll': dialogLoading } ]"
        v-loading="dialogLoading"
        ref="dialogBody"
      >内容区域</div>
      <div slot="footer" class="el-dialog-footer-contant">
        <el-button :disabled="dialogLoading" @click="handleBeforeClose">取消</el-button>
        <el-button :disabled="dialogLoading" type="primary" @click="dialogVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogLoading: false,
      dialogTitle: "标题",
      dialogVisible: true
    };
  },
  methods: {
    // 初始化
    init() {
      this.dialogVisible = true;
      // this.dialogLoading = true; // 请求数据显示loading

      // 滚动条回至顶部及还原布局
      this.$nextTick(() => {
        this.$refs.dialogBody.scrollTop = 0;
        this.resetLayout();
      });
    },
    // 关闭动画执行前的回调
    handleBeforeClose() {
      this.$confirm("此操作将关闭 Dialog, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.dialogVisible = false;
          console.log("您确定了关闭 Dialog");
        })
        .catch(() => {
          console.log("您取消了关闭 Dialog");
        });
    },
    // 关闭动画结束时的回调
    handleClosed() {
      console.log("Dialog 关闭动画结束时的回调");
    },
    // 还原布局（上下&左右居中）
    resetLayout() {
      let elDialog = this.$refs.MiddleDialog.querySelector(".el-dialog");

      elDialog.style.left = "50%";
      elDialog.style.top = "50%";
    }
    // 监听窗口变化事件
    // watchWindowResize() {
    //   let _this = this;
    //   let timer = null;
    //
    //   window.onresize = function () {
    //     timer = timer ? null : setTimeout(_this.resetLayout, 0);
    //   }
    // }
  }
};
</script>

<style lang="less">
@import "../assets/less/define.less";

.MiddleDialogComponent {
  @dialog-width: 822px;
  @dialog-body-height: 520px;
  @loading-mask-height: 576px; // 注意 @dialog-body-height + 56 = @loading-mask-height

  .el-loading-mask {
    left: 50%;
    top: calc(50% + 20px);
    width: @dialog-width;
    height: @loading-mask-height;
    transform: translate(-50%, -50%);
    border-radius: 0 0 8px 8px;
  }

  .el-dialog__wrapper {
    background: rgba(255, 255, 255, 0.1);
  }

  .el-dialog {
    width: @dialog-width;
    margin: 0;
    left: 50%;
    top: 50%;
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -50%);

    .el-dialog__header {
      height: 40px;
      background: @color-primary;
      padding: 0 10px;
      line-height: 40px;
      border-radius: 8px 8px 0 0;

      .el-dialog__title {
        color: #ffffff;
        font-size: 16px;
      }

      .el-dialog__headerbtn {
        top: 8px;
        right: 10px;
        font-size: 24px;

        .el-dialog__close {
          color: #ffffff;
        }
      }
    }

    .el-dialog__body {
      height: calc(100% - 96px);
      padding: 0;
      background: #ffffff;

      .el-dialog-body-contant {
        height: calc(100%);
        padding: 10px;
        min-height: @dialog-body-height;
        max-height: @dialog-body-height;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;

        &.lock-scroll {
          overflow-y: hidden;
        }
      }
    }

    .el-dialog__footer {
      height: 56px;
      background: #ffffff;
      padding: 0 10px;
      display: flex;
      border-radius: 0 0 8px 8px;

      .el-dialog-footer-contant {
        flex: 1;
        border-top: 1px solid #ebebeb;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .el-button {
        line-height: 36px;
        height: 36px;
        padding: 0 15px;
        min-width: 100px;

        span {
          font-size: 14px;
        }
      }
    }
  }
}
</style>